<template>

  <el-row>
    <el-col :span="4"></el-col>
    <el-col :span="16" style="text-align: center;">
      <h1>个人信息</h1>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>

  <el-row>
    <el-col :span="4"></el-col>
    <el-col :span="16" class="form-body">

      <el-form :model="formInfo" ref="formRef" :rules="formRules">
        <el-form-item label="账户邮箱" prop="data.email">
          <el-input :disabled="buttonInfo.isDisabled" v-model="formInfo.data.email" class="me-input"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="data.phone">
          <el-input :disabled="buttonInfo.isDisabled" v-model="formInfo.data.phone" class="me-input"></el-input>
        </el-form-item>
        <el-form-item label="个人昵称" prop="data.name">
          <el-input :disabled="buttonInfo.isDisabled" v-model="formInfo.data.name" class="me-input"></el-input>
        </el-form-item>
        <el-form-item label="账户密码" prop="data.password">
          <el-input :disabled="buttonInfo.isDisabled" v-model="formInfo.data.password" class="me-input" :show-password="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 50px;" @click="changeInfo">{{ buttonInfo.content }}</el-button>
          <el-button style="margin-left: 50px;" @click="userExit">退出登录</el-button>
        </el-form-item>
      </el-form>

    </el-col>
    <el-col :span="4"></el-col>
  </el-row>

  <el-row>
    <el-col :span="4"></el-col>
    <el-col :span="16" style="text-align: center;">
      <h1>订购状态</h1>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>

  <el-row>
    <el-col :span="2"></el-col>
    <el-col :span="20">

      <el-table :data="formInfo.data.subscribe">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="startDay" label="起始日期"></el-table-column>
        <el-table-column prop="subscribe" label="订购套餐"></el-table-column>
      </el-table>

    </el-col>
    <el-col :span="2"></el-col>
  </el-row>
 
</template>

<script>
import axios from 'axios'
import { reactive, ref, onMounted } from 'vue'
import Cookie from 'js-cookie'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import useIPAddress from '../hooks/useIPAddress.js'

export default {
  setup() {

    // 配置axios请求的ip地址
    const ip = useIPAddress()

    // 操作页面
    const router = useRouter()

    // 从 Cookie 中获取用户基本信息
    const userInfo = JSON.parse(Cookie.get('cookie'))

    // 获取用户更多信息
    onMounted(() => {
      axios({
        url: `http://${ip}/users`,
        method: 'GET',
        params: {
          userID: userInfo.id
        }
      }).then(res => {
        formInfo.data = res.data
      }).catch(err => {
        console.log('OWN ERROR: axios error: ', err, '--where: Get user infos')
      })
    })

    // 表单信息
    const formInfo = reactive({
      data: {}
    })

    // 表单规则
    const formRef = ref()
    const formRules = {
      "data.email": {
        required: true,
        trigger: 'blur',
        message: '邮箱不能为空'
      },
      "data.phone": {
        required: true,
        trigger: 'blur',
        message: '手机号不能为空'
      },
      "data.name": {
        required: true,
        trigger: 'blur',
        message: '昵称不能为空'
      },
      "data.password": {
        required: true,
        trigger: 'blur',
        message: '密码不能为空'
      }
    }

    // 修改用户信息
    let buttonInfo = reactive({
      isDisabled: true,
      content: '修改信息'
    })
    function changeInfo() {
      if (buttonInfo.isDisabled) {
        buttonInfo.isDisabled = false
        buttonInfo.content = '保存信息'
      } else {
        formRef.value.validate(valid => {
          if (valid) {
            buttonInfo.isDisabled = true
            buttonInfo.content = '修改信息'
            axios({
              url: `http://${ip}/users`,
              method: 'PUT',
              params: {
                id: userInfo.id,
                data: formInfo.data
              },
              withCredentials: true //但凡是要操作cookie都必须带上这个B
            }).then(res => {
              ElMessageBox.alert(res.data, '提示')
              router.push('/MainHome')
            }).catch(err => {
              ElMessageBox.alert(err.message, '提示')
            })
          }
        })
      }
    }

    // 退出登录
    function userExit() {
      axios({
        url: `http://${ip}/users`,
        method: 'DELETE',
        withCredentials: true
      }).then((res) => {
        ElMessageBox.alert(res.data, '提示')
        router.push('/MainHome')
      }).catch((err) => {
        ElMessageBox.alert(err.message, '提示')
      })
    }

    return {
      formInfo,
      formRef,
      formRules,
      changeInfo,
      buttonInfo,
      userExit
    }
  }
}
</script>

<style>
  .el-input__wrapper {
    max-width: 240px;
  }
  .el-button:focus {
    background-color: #fff !important;
  }
  .el-input {
    --el-input-focus-border-color: #EEA8A8;
  }
  .el-table__inner-wrapper .cell {
    text-align: center;
  }
  .form-body {
    border: 2px solid #EEA8A8;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>